import styled from "styled-components";

// 基础案例--复用
const ButtonBase = styled.button`
  padding: 10px 20px;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  margin: 10px;
  &:hover {
    color: pink;
  }
`;

const ButtonPrimay = styled(ButtonBase)`
  background-color: blue;
  color: #fff;
`;

const ButtonFail = styled(ButtonBase)`
  background-color: red;
`;

export const ButtonDemo2 = () => {
  return (
    <div>
      <ButtonPrimay>按钮</ButtonPrimay>
      <ButtonFail>失败按钮</ButtonFail>
    </div>
  );
};
